<template>
	<view class="device-detail-layout">
		<!-- 导航栏 -->
		<uv-navbar title="机具信息" :placeholder="true" :titleStyle="{fontSize:'18px'}" autoBack>
			<template #right>
				<text style="color: #5F56EF;" @tap="showRate">费率</text>
			</template>
		</uv-navbar>
		<view class="device-detail-box">
			<!-- 商户详情机具信息 -->
			<view class="merchant-detail-device-info" v-if="dataInfo.merchantId">
				<image class="merchant-detail-device-info-icon" src="/static/home/device_list_icon.png" mode="aspectFit"></image>
				<view class="merchant-detail-device-info-container">
					<view class="merchant-detail-device-info-top">
						<text>{{dataInfo.deviceName}}</text>
						<view class="merchant-detail-device-info-top-tag" :class="[dataInfo.activeStatus == '1' ? 'unactive-tag' : '']">{{dataInfo.activeStatus == '1' ? '已激活' : '未激活'}}</view>
					</view>
					<view class="merchant-detail-device-info-sn">
						<text>{{dataInfo.deviceNo}}</text>
						<image src="/static/my/my_copy.png" mode="aspectFit" @tap="copyText(dataInfo.deviceNo)"></image>
					</view>
					<text class="merchant-detail-device-info-time">绑定时间：{{dataInfo.bindDate}}</text>
				</view>
			</view>
			<!-- 机具详情机具信息 -->
			<view class="device-detail-card" v-else>
				<image class="device-detail-card-icon" src="/static/home/device_list_icon.png" mode="aspectFit"></image>
				<view class="device-detail-card-content">
					<text>{{dataInfo.brandName}}-{{dataInfo.produceName}}({{dataInfo.deviceTypeCode}})</text>
					<text>{{dataInfo.ksnNo}}</text>
					<view class="status-box">
						<text :style="{color:getBindStatus().color}">{{getBindStatus().status}}</text>
						<text :style="{color:getActiveStatus().color}">{{getActiveStatus().status}}</text>
					</view>
				</view>
				<image class="device-detail-card-copy" src="/static/my/my_copy.png" mode="aspectFit" @tap="copyText(dataInfo.ksnNo)"></image>
			</view>
			
			<!-- 菜单栏 -->
			<view class="menu-box">
				<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'28rpx'}" :inactiveStyle="{color:'#666666',fontSize:'28rpx'}" :itemStyle="{height:'80rpx'}" lineColor="#5F56EF" @click="selectItem"></uv-tabs>
			</view>
			<!-- 菜单项所展示的内容 -->
			<view class="device-detail-tab-container">
				<xh-device-detail-policy-info :model="dataInfo" v-if="selectTabIndex == 0"></xh-device-detail-policy-info>
				<xh-device-detail-service :model="dataInfo" v-if="selectTabIndex == 1"></xh-device-detail-service>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import XhDeviceDetailPolicyInfo from '@/pages/home/device-manager/device-list/device-detail/widget/xh-device-detail-policy-info.vue'
	import XhDeviceDetailService from '@/pages/home/device-manager/device-list/device-detail/widget/xh-device-detail-service.vue'
	
	const props =  defineProps(['data'])
	const dataInfo = JSON.parse(decodeURIComponent(props.data || '{}'))
	console.log(dataInfo)
	const menuList = ref([{name:'产品政策',type:0},{name:'服务费',type:1}])
	const selectTabIndex = ref(0)
	// 费率
	const showRate = ()=>{
		uni.navigateTo({
			url:`/pages/home/device-manager/device-list/device-detail/device-rate/device-rate?data=${props.data}`
		})
	}
	// 选择菜单项
	const selectItem = (item)=>{
		selectTabIndex.value = item.type
	}
	// 复制机具号
	const copyText = (code)=>{
		uni.$utils.copy(code)
	}
	// 处理绑定状态
	const getBindStatus = () => {
		if (dataInfo.bindStatus == '1') {
			return {
				status: '已绑定',
				color: '#28D182'
			}
		} else if (dataInfo.bindStatus == '2') {
			return {
				status: '已解绑',
				color: '#E01300'
			}
		} else {
			return {
				status: '未绑定',
				color: '#FFAA00'
			}
		}
	}
	// 处理激活状态
	const getActiveStatus = () => {
		if (dataInfo.activeStatus == '1') {
			return {
				status: '已激活',
				color: '#2C8DF4'
			}
		} else if (dataInfo.activeStatus == '2') {
			return {
				status: '未激活',
				color: '#909399'
			}
		}
		return {
			status: '',
			color: '#909399'
		}
	}
</script>

<style lang="scss" scoped>
.device-detail-layout{
	.device-detail-box{
		padding: 30rpx;
		.device-detail-card{
			background-color: #fff;
			border: 1px solid #eee;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 30rpx;
			.device-detail-card-icon{
				width: 80rpx;
				height: 80rpx;
				flex-shrink: 0;
			}
			.device-detail-card-copy{
				width: 48rpx;
				height: 48rpx;
				flex-shrink: 0;
				margin-left: auto;
			}
			.device-detail-card-content{
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				text:nth-child(1){
					font-size: 28rpx;
				}
				text:nth-child(2){
					font-size: 24rpx;
					margin-top: 10rpx;
				}
				.status-box {
					margin-top: 10rpx;
					text{
						font-size: 24rpx;
					}
					text:nth-child(2){
						margin-left: 30rpx;
					}
				}
			}
		}
		.merchant-detail-device-info{
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			.merchant-detail-device-info-icon{
				width: 80rpx;
				height: 80rpx;
				flex-shrink: 0;
			}
			.merchant-detail-device-info-container{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				flex: 1;
				.merchant-detail-device-info-top{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					.merchant-detail-device-info-top-tag{
						background-color: #ff0203;
						color: #ffffff;
						font-size: 22rpx;
						height: 36rpx;
						line-height: 36rpx;
						padding: 0 12rpx;
						border-radius: 18rpx;
						margin-left: 10rpx;
					}
					.unactive-tag{
						background-color: #008000;
					}
				}
				.merchant-detail-device-info-sn{
					display: flex;
					align-items: center;
					color: $xh-color-9;
					font-size: 24rpx;
					margin: 10rpx 0;
					image{
						width: 36rpx;
						height: 36rpx;
					}
				}
				.merchant-detail-device-info-time{
					color: $xh-color-9;
					font-size: 24rpx;
				}
			}
		}
		
		.device-detail-tab-container{
			margin-top: 20rpx;
		}
	}
}
</style>
